<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pm="http://primefaces.org/mobile"
        xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	contentType="text/html"
    renderKitId="PRIMEFACES_MOBILE">

    <pm:page title="Contacts">

        <!-- Main View -->
        <pm:view id="main" swatch="d">
            <h:form id="listContactsForm">
                <pm:header title="Contacts" swatch="b">
                    <f:facet name="left"><p:button value="Groups" iconPos="none"/></f:facet>
                    <f:facet name="right"><p:commandButton value="New" iconPos="notext" icon="plus" action="#{contactsView.prepareNewContact}" update=":newContactForm:content"/></f:facet>
                </pm:header>

                <pm:content> 
                    <p:dataList id="contactsList" value="#{contactsView.contacts}" var="contact">
                        <f:attribute name="filter" value="true" />
                        <f:attribute name="placeholder" value="Search" />
                        <f:attribute name="autoDividers" value="true" />
                        <f:attribute name="icon" value="grid" />
                        <f:attribute name="iconSplit" value="true" />                        
                        <p:column>
                            <p:commandLink value="#{contact.firstname} #{contact.surname}" action="pm:new?transition=slide" update=":newContactForm:content">
                                <f:setPropertyActionListener value="#{contact}" target="#{contactsView.contact}" />
                                <p:graphicImage value="/images/pf-logo.png" />                                                                                                                    
                            </p:commandLink>                                                                                                                                                                                                       
                            <a href="tel:#{contact.phone}">Call</a>
                        </p:column>
                        <p:outputPanel>
                            <p:column>                            
                                <p:commandLink styleClass="selection">
                                    <f:setPropertyActionListener value="#{contact}" target="#{contactsView.contact}" />
                                </p:commandLink>
                            </p:column>         
                        </p:outputPanel>

                        <f:facet name="footer">
                            <strong>#{fn:length(contactsView.contacts)} Contacts</strong>
                        </f:facet>                        
                    </p:dataList>                  
                </pm:content>
            </h:form>                

            <p:contextMenu event="swiperight" for="listContactsForm:contactsList" style="min-width:210px">                                        
                <h:form>  
                    <p:dataList type="inset" >
                        <f:facet name="header" >Choose an action</f:facet>                                
                        <p:commandLink value="Delete" actionListener="#{contactsView.deleteContact}" update=":listContactsForm:contactsList"  />                            
                    </p:dataList>                     
                </h:form>
            </p:contextMenu>             

        </pm:view>

        <!-- New Contact -->
        <pm:view id="new" swatch="d">
            <h:form id="newContactForm">
                <pm:header title="New Contact" swatch="b" >
                    <f:facet name="left"><p:button value="Cancel" iconPos="none" onclick="PrimeFaces.back()"/></f:facet>
                    <f:facet name="right"><p:commandButton value="Done" actionListener="#{contactsView.saveContact}" update=":listContactsForm:contactsList" iconPos="none" oncomplete="PrimeFaces.back()" /></f:facet>
                </pm:header>

                <pm:content>  
                    <p:outputPanel id="content">
                        <p:inputText id="name" value="#{contactsView.contact.firstname}" label="Name:"/>

                        <p:inputText id="surname" value="#{contactsView.contact.surname}" label="Surname:"/>

                        <p:inputText id="age" value="#{contactsView.contact.age}" type="number" label="Age:"/>

                        <p:inputText id="phone" value="#{contactsView.contact.phone}" type="tel" label="Phone:"/>

                        <p:inputText id="mail" value="#{contactsView.contact.mail}" type="email" label="Email:"/>

                        <p:inputTextarea id="address" value="#{contactsView.contact.address}" label="Address:"/>
                        
                        <p:commandButton rendered="#{not empty contactsView.contact.firstname}" value="Delete Contact" actionListener="#{contactsView.deleteContact}" update=":listContactsForm:contactsList" iconPos="none" oncomplete="PrimeFaces.back()" >                        
                            <f:attribute name="swatch" value="e" />
                        </p:commandButton>                         
                        
                    </p:outputPanel>                                                           
                </pm:content>                                                
            </h:form>
        </pm:view>

    </pm:page>

</f:view>